<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header
      style="
        text-align: right;
        font-size: 12px;
        border-bottom: 1px solid #bebebe;
      "
    >
      <common-header></common-header>
    </el-header>
    <el-container style="overflow: hidden;">
      <!-- 侧边栏区域 -->
      <el-aside width="200px" class="aside">
        <div>
          <div
            v-for="item in menuItems"
            :key="item.name"
            :class="['elAsideDiv', { active: selectedItem === item.path }]"
            @click="handleClick(item.path)"
          >
            {{ item.name }}
          </div>
        </div>

        <!-- 在侧边栏里面下方写横着的两个小按钮，再下方是一个二维码 -->
        <div class="introduces">
          <div class="introduceBtn">
            <el-button>
              <p>建站入门</p>
            </el-button>
            <el-button>
              <p>模块介绍</p>
            </el-button>
          </div>
          <div class="QRcodeStyle">
            <p>服务支持</p>
            <img
              src="https://cdn4.codesign.qq.com/prototypes/2024/03/13/1DWk924J7D1Q030GnMm13/biktvbfj0vgyvjlx/8f4c3c982b7110b7b67703b5e2e2e459.png"
              style="width: 100px; height: 100px"
            />
            <p>400-1511-11</p>
          </div>
        </div>
      </el-aside>
      <!-- 列表区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonHeader from "../components/CommonHeader.vue";

export default {
  data() {
    return {
      menuItems: [
        {
          path: "websiteManage",
          name: "网站管理",
        },
        {
          path: "spaceManage",
          name: "空间管理",
        },
        {
          path: "accountManage",
          name: "账号管理",
        },
        {
          path: "domainManage",
          name: "域名管理",
        },
        {
          path: "helpCenter",
          name: "帮助中心",
        },
        {
          path: "SEOOptimization",
          name: "SEO优化",
        },
        // {
        //   path: "systemManage",
        //   name: "系统管理",
        // },
        {
          path: "recycleBin",
          name: "回收站",
        },
        {
          path: "articleManage",
          name: "文章管理",
        },
        // {
        //   path: "productManage",
        //   name: "产品管理",
        // },
        // {
        //   path: "videoManage",
        //   name: "视频管理",
        // },
      ],
      selectedItem: "",
    };
  },
  created() {
    // 在sessionStorage中存储token
    sessionStorage.setItem("XAccessToken", 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOjEsImV4cCI6MTcyNjI1ODg3OSwicGxhdGZvcm0iOjIsInVzZXJuYW1lIjoiMTUwNzMxNzEzMjAifQ.hsW2zoK0NOVqAeoHrV-mORCVdp3gBRlsH1mcIILe7V8');
    sessionStorage.setItem("SysAccessToken", 'm7mSzYLFvbbFDU+d4fXFwg==');

    this.selectedItem = this.$route.path.split("/Main/")[1] || "websiteManage";
    this.$watch("$route", (to, from) => {
      this.selectedItem = to.path.split("/Main/")[1] || "websiteManage";
    });
  },
  methods: {
    handleClick(path) {
      const fullPath = `/Main/${path}`;

      if (this.$route.path != fullPath && !(fullPath === "/")) {
        this.$router.push(fullPath);
      }
    },
  },
  components: {
    CommonHeader,
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(247, 249, 250, 1);
}

/* 头部区域 */
.el-header {
  color: #333;
  line-height: 60px;
}

/* 侧边栏区域 */
.aside {
  background-color: rgb(15, 22, 66, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .elAsideDiv {
    color: white;
    padding: 10px 60px 10px 65px;
  }

  .elAsideDiv:hover {
    color: rgba(172, 163, 255, 1);
    cursor: pointer;
  }

  .elAsideDiv.active {
    background-color: rgba(172, 163, 255, 0.2);
    color: rgba(172, 163, 255, 1);
  }

  .introduces {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    color: white;
    
    .introduceBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-button{
        width: 60px;
        height: 50px;
        margin: 0 10px;
        padding: 8px 14px;
        p{
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          text-wrap: wrap;
          line-height: 18px;
        }
      }
    }

    .QRcodeStyle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      p {
        margin: 8px 0;
      }
    }
  }
}
</style>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
</style>
